/**
 * Created by Apple on 2017/7/27.
 */
/*

 class Tzs {
 constructor() {
 this.oDiv = document.querySelector("#div1");
 this.oLeft = 0;
 this.oTop = 0;
 this.init();

 }

 init() {
 const _this = this;
 this.oDiv.onmousedown = function (ev) {
 _this.tzDown(ev)
 }
 }

 tzDown() {
 var oTip=document.createElement('p');
 oTip.className='tip';
 oTip.style.left=x+'px';
 oTip.style.top=y+'px';
 document.body.appendChild(oTip);
 var ev=ev||event;
 var disX=ev.clientX-oDiv.offsetLeft;
 var disY=ev.clientY-oDiv.offsetTop;
 const _this = this;
 document.onmousemove = function (ev) {
 _this.tzMove(ev)
 }
 document.onmouseup = this.tzUp;

 return false
 }

 tzMove() {
 var ev=ev||event;
 x=ev.clientX-disX;
 y=ev.clientY-disY;
 oTip.style.left=x+'px';
 oTip.style.top=y+'px';
 }

 tzUp() {

 oDiv.style.left=x+'px';
 oDiv.style.top=y+'px';
 document.body.removeChild(oTip);
 document.onmouseup=null;
 document.onmousemove=null;
 }
 }
 */
window.onload = function () {
class Tzs {
    constructor(id2) {
        this.x2 = 0;
        this.y2 = 0;

        this.oDiv2 = document.querySelector(id2);
        this.init()


    }

    init() {
        let This = this;

        this.oDiv2.onmousedown = function (ev) {
            let eve2 = ev || event;
            This.cleX2 = eve2.clientX - This.oDiv2.offsetLeft;
            This.cleY2 = eve2.clientY - This.oDiv2.offsetTop;
            This.oTip = document.createElement('p');
            This.oTip.className = 'tip';
            This.oTip.style.left = this.x2;
            This.oTip.style.top = this.y2;
            document.body.appendChild(This.oTip);

            document.onmousemove = function (ev) {
                let eve2 = ev || event

                this.x2 = eve2.clientX - This.cleX2 + 'px';
                this.y2 = eve2.clientY - This.cleY2 + 'px';

                This.oTip.style.left = this.x2;
                This.oTip.style.top = this.y2;
            }
            document.onmouseup = function () {
                This.oDiv2.style.left = this.x2;
                This.oDiv2.style.top = this.y2;
                document.body.removeChild(This.oTip);
                document.onmouseup = null;
                document.onmousemove = null;

            }
            return false;
        }
    }
}


    new Tzs("#div1");
}
